<template>
  <div :style="'width:' + width">
    <el-form :label-width="labelWidth" label-position="left" :disabled="disabled">
      <el-form-item :label="name" :required="required">
        <div style="display: flex">
          <el-input-number style="flex: 1" v-model="data.num" :controls-position="position" @input="input"
            :precision="precision" :step="step" :placeholder="placeholder" :min="min" :max="max"></el-input-number>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: ['value', 'disabled', 'props', 'required', 'isBusiness'],
  data: function () {
    return {
      data: {
        num: null,
        displayName: '',
      },
    }
  },
  computed: {
    myprops() {
      return this.props ? this.props : []
    },
    labelWidth() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'labelWidth')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '140px'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '140px'
        }
      }
      return '80px'
    },
    width() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'width')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '100%'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '100%'
        }
      }
      return '100%'
    },
    name() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'name')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '数字'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '数字'
        }
      }
      return '数字'
    },
    placeholder() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'placeholder')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '请选择'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '请选择'
        }
      }
      return '请选择'
    },
    position() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'position')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : 'right'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : 'right'
        }
      }
      return 'right'
    },
    precision() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'precision')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? Number(val.BFFP_Value) : null
        } else {
          return val.FFLP_Value ? Number(val.FFLP_Value) : null
        }
      }
      return null
    },
    step() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'step')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? Number(val.BFFP_Value) : 1
        } else {
          return val.FFLP_Value ? Number(val.FFLP_Value) : 1
        }
      }
      return 1
    },
    min() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'min')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? Number(val.BFFP_Value) : -Infinity
        } else {
          return val.FFLP_Value ? Number(val.FFLP_Value) : -Infinity
        }
      }
      return -Infinity
    },
    max() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'max')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? Number(val.BFFP_Value) : Infinity
        } else {
          return val.FFLP_Value ? Number(val.FFLP_Value) : Infinity
        }
      }
      return Infinity
    },
  },
  methods: {
    input() {
      this.data.displayName = this.data.num
      this.$emit('input', JSON.stringify(this.data))
      this.$emit('display', this.data.displayName)
    },
  },
  mounted: function () {
    if (this.value) {
      this.data = JSON.parse(this.value)
    }
  },
}
</script>
<style scoped>
.el-form-item {
  margin: 10px !important;
}
</style>